<div id="tb<?php echo $uniqid;?>" style="padding:5px">
	<table cellspacing="0" cellpadding="0">
		<tbody>
		<tr>
			<td colspan="4" style="padding-bottom: 5px;">
				<span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
					  @click="filter('all')"><span class="l-btn-text">全部</span></span>
				<span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='waiting'?'selected':''"
					  @click="filter('waiting')"><span class="l-btn-text">待审核</span></span>
				<span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='agreed'?'selected':''"
					  @click="filter('agreed')"><span class="l-btn-text">已同意</span></span>
				<span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='refused'?'selected':''"
					  @click="filter('refused')"><span class="l-btn-text">已拒绝</span></span>
			</td>
		</tr>
		<tr>
			<td><span style="line-height:30px;">申请日期</span>
				<input id="storeapplyStartOn" style="width:110px" type="text" class="easyui-datebox"> </input>至
				<input id="storeapplyEndOn" style="width:110px" type="text" class="easyui-datebox"> </input>
			</td>
			<td style="padding-right: 5px; padding-left: 5px;">
				<select v-model="params.keywordsType" class="forminput inputstyle textbox-text validatebox-text" @change="keywordsTypeChange" style="width:120px; border-color: #cccccc !important;">
					<option value="store_id">门店ID</option>
					<option value="store_name">门店名称</option>
					<option value="realname">联系人</option>
					<option value="phone">联系电话</option>
					<option value="member_id">申请用户ID</option>
					<option value="member_phone">申请用户手机号</option>
				</select>
			</td>
			<td>
				<input v-model="params.keywords" style="width:200px" type="text" placeholder="输入内容" class="easyui-input textbox keywords_input_search_box">
			</td>
			<td><a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
					class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a>
				<a href="javascript:void(0);" @click="reset" class="l-btn l-btn-small l-btn-plain"><span
						class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
						class="l-btn-text">重置</span></span></a>
				<a href="javascript:void(0);" onclick="storeapplyLoad();" class="l-btn l-btn-small l-btn-plain"><span
						class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span class="l-btn-text">重载</span></span></a></td>
		</tr>
		</tbody>
	</table>
</div>
<div class="con"  style="-moz-user-select:none;">
	<table id="storeapply"></table>
</div>
<div id="storeapplydlg" class="easyui-dialog" style="width:720px; height:520px;" title="信息框" closed="true"></div>
<script>
	var storeapplyVm = new Vue({
		el: '#tb<?php echo $uniqid;?>',
		data: {
			params: {
				start_on: '',
				end_on: '',
				keywords: '',
				keywordsType:'store_id',
				mode: 'all'
			},
		},
		filters: {
			formatDate(nS){
				return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
			}
		},
		mounted() {

		},
		methods: {
			init: function () {
				this.params.start_on = $('#tb<?php echo $uniqid;?> #storeapplyStartOn').datebox('getValue');
				this.params.end_on = $('#tb<?php echo $uniqid;?> #storeapplyEndOn').datebox('getValue');
				storeapplyLoad();
			},
			filter(mode) {
				this.params.mode = mode;
				this.init();
			},
			keywordsTypeChange: function (e){
				let placeholder = '请输入内容';
				if(this.params.keywordsType === 'phone' || this.params.keywordsType === 'member_phone'){
					placeholder = '用户手机号不能少于4位数';
				}
				$('#tb<?php echo $uniqid;?> .keywords_input_search_box').attr('placeholder',placeholder);
			},
			reset: function (){
				this.params = {
						start_on: '',
						end_on: '',
						keywords: '',
						keywordsType:'store_id',
						mode: 'all'
					};
				storeapplyLoad();
			},
			applyAgree: function (id, close) {
				storeapplySuccess(id, close);
			},
			applyRefuse: function (id, close) {
				storeapplyRefuse(id, close);
			},
		}
	});
	var storeapplyView = function (id) {
		let row_id = id;
		if (row_id) {
			$("#storeapplydlg").dialog({
				title: '查看申请',
				closed: false,
				width: 740,
				height: 520,
				cache: false,
				href: '/admin/storeapply/info?id=' + row_id,
				modal: true,
				buttons: [{
					text: '关闭',
					iconCls: 'icon-no',
					handler: function () {
						$("#storeapplydlg").dialog('close');
					}
				}]
			});
		} else {
			$.messager.alert('提示', '请先选择要查看的门店！', 'warning');
		}
	};
	var storeapplySuccess = function (opt_id, close_dialog = false){
		if (opt_id) {
			$.messager.confirm('提示', '<span style="color: #36c705; font-weight: bold; font-size: 1.1em;">同意门店申请？</span>', function (r) {
				if(r){
					$.messager.progress();
					$.post('/admin/storeapply/applyconsent', {id: opt_id}, function (data) {
						$.messager.progress('close');
						if (data.ret === 0) {
							$.messager.show({
								title: '提示',
								msg: data.msg,
								timeout: 3000,
								showType: 'slide'
							});
							if(close_dialog){
								$("#storeapplydlg").dialog('close');
							}
							storeapplyReload();
						} else {
							$.messager.alert('提示', data.msg, 'error');
						}
					}, 'json');
				}
			});
		}
	};

	var storeapplyRefuse = function (opt_id, close_dialog = false) {
		if (opt_id) {
			$.messager.confirm('提示', '<span style="color: #d51313; font-weight: bold; font-size: 1.1em;">确定 拒绝门店申请？</span>', function (r) {
				if (r) {
					$.messager.prompt('拒绝用户申请提示', '请输入拒绝原因！', function (remark){
						if('undefined' !== typeof(remark)){
							let new_remark = (remark.length === 0)?'无':remark;
							$.messager.progress();
							$.post('/admin/storeapply/applyrefuse', {id: opt_id, remark: new_remark}, function (data) {
								$.messager.progress('close');
								if (data.ret === 0) {
									$.messager.show({
										title: '提示',
										msg: data.msg,
										timeout: 3000,
										showType: 'slide'
									});
									if(close_dialog){
										$("#storeapplydlg").dialog('close');
									}
									storeapplyReload();
								} else {
									$.messager.alert('出错', data.msg, 'error');
								}
							}, 'json');
						}
					});
				}
			});
		} else {
			$.messager.alert('提示', '请先选择要拒绝的行！', 'warning');
		}
	};
	var storeapplyLoad = function () {
		$("#storeapply").datagrid('load', storeapplyVm.params);
	};
	var storeapplyReload = function () {
		$("#storeapply").datagrid('reload');
	};
	var storeapplySearch = function () {
		var height = $(window).height() - $(".top").height() - 46;
		var width = $(window).width() - $(".leftmenu").width() - 8;
		$("#storeapply").datagrid({
			title: '门店申请列表',
			width: width,
			height: height,//高度
			singleSelect: true,//如果为true，则只允许选择一行
			striped: true,//是否显示斑马线效果。
			rownumbers: false,//如果为true，则显示一个行号列。
			pagination: true,//是否显示分页
			pageSize: 10,
			pageList: [10, 20, 30, 50],
			method: 'post',
			sortName: 'created_at',
			sortOrder: 'desc',
			idField: 'id',
			treeField: 'title',
			url: '/admin/storeapply/index',
			queryParams: storeapplyVm.params,
			fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
			nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
			selectOnCheck: false,
			checkOnSelect: true,
			toolbar: '#tb<?php echo $uniqid;?>',
			columns: [[
				{field:'id',title:'ID', align: 'center', halign: 'center',width:fixWidth(3)},
				{field:'name',title:'门店信息', align: 'left', halign: 'center',width:fixWidth(12),formatter(val, rowData, rowIndex){
					let info = '<div style="display: flex;align-items: center;">';
					if(rowData.images_arr.length > 1){
						info += '<img src="'+rowData.images_arr[0]+'" style="height:30px;width:30px;border-radius: 3px;border:1px solid #e6e6e6; margin-right: 3px;" />'
					}else{
						info += '<img src="'+rowData.images+'" style="height:30px;width:30px;border-radius: 3px;border:1px solid #e6e6e6; margin-right: 3px;" />'
					}
					info += '<p>'+val+'</p>'
					info += '</div>'
					return info;
				}},
				{field:'realname',title:'联系人', align: 'center', halign: 'center',width:fixWidth(4)},
				{field:'phone',title:'联系电话', align: 'center', halign: 'center',width:fixWidth(5)},
				{field:'address',title:'详细地址', align: 'left', halign: 'center',width:fixWidth(15), styler: function(){
						return {class:'cell_white-space'};
					}, formatter(val, rowData, rowIndex)
					{
						if(val.indexOf(rowData.province_name) === 0) {
							return val;
						}else{
							return rowData.province_name + rowData.city_name + rowData.area_name + val;
						}
					}
				},
				{field:'apply_num',title:'申请次数', align: 'center', halign: 'center',width:fixWidth(3),formatter(val, rowData, rowIndex){
					return val + '次';
				}},
				{field:'status_text',title:'状态', align: 'center', halign: 'center',width:fixWidth(5),formatter:function (value,rowData,rowIndex){
						let status_con = '<div style="display: flex; flex-direction:column; width: 100%;"><div class="status_color_'+rowData.status+'" style="width: 100%; text-align: center;">'+value+'</div>';
						if(rowData.status == '-1'){
							status_con += '<div style="width:100%; text-align: left; white-space: pre-wrap;">原因：'+rowData.reason+'</div></div>';
						}
						return status_con
					}
				},
				{field:'member',title:'申请用户', align: 'left', halign: 'center',width:fixWidth(7),formatter(val, rowData, rowIndex)
					{
						let member_info = '<div style="display: flex;align-items: center;">';
						if(val){
							if(val.avatar){
								member_info += '<img src="'+val.avatar+'" style="height:30px;width:30px; border-radius: 50%; border:1px solid #e6e6e6; margin-right: 3px;" />'
							}
							member_info += '<p style="white-space:pre-wrap;">'+val.nickname+'</p>'
						}else{
							member_info += '<p>非正式用户</p>'
						}
						member_info += '</div>'
						return member_info;
					}
				},
				{field:'created_at',title:'申请时间', align: 'center', halign: 'center',width: fixWidth(6)},
				{field: 'options', title: '操作', align: 'center', halign: 'center', width: fixWidth(8), formatter: function (value, rowData, rowIndex)
					{
						let buttons = '<div class="table">';
						buttons += '<span class="l-btn l-btn-small l-btn-left color9 table" onclick="storeapplyView(\'' + rowData.id + '\')"><span class="l-btn-text">查看</span></span>';
						if(rowData.status == 0){
							buttons += '<span class="l-btn l-btn-small l-btn-left color9 table" style="color: #0eb913;" onclick="storeapplySuccess(\'' + rowData.id + '\')"><span class="l-btn-text">同意</span></span>';
							buttons += '<span class="l-btn l-btn-small l-btn-left color9 table" style="color: #d33632;" onclick="storeapplyRefuse(\'' + rowData.id + '\')"><span class="l-btn-text">拒绝</span></span>';
						}
						return buttons + '</div>';
					}
				},
			]],
			onDblClickRow: function (index, rowData) {
				storeapplyView(rowData.id);
			}
		});
	};
	onDatagridResize("#storeapply");
	storeapplySearch();
</script>
<style>
	.l-btn-plain{
		border: rgba(0,0,0,0) 1px solid;
	}

	.datagrid-toolbar .selected {
		color: #f1f1f1;
		background: #1065a7;
		border: 1px solid #f0f0f0;
	}

	.cell_white-space > *{
		white-space: normal !important;
	}

	.keywords_input_search_box{
		width: 300px;
		border-color: #cccccc;
	}

	.status_color_0{
		color: #f89a2d;
	}
	.status_color_1{
		color: #0eb913;
	}
	.status_color_-1{
		color: #d33632;
	}
</style>